<template>
  <div id="footer">
    <div class="footer">
      <div
        class="size"
        :class="{ cl: item.falg }"
        v-for="(item, index) in arr"
        v-bind:key="index"
        @click="change(index)"
      >
        <img class="im" :src="item.falg ? item.imgUrl1 : item.imgUrl" alt="底部图片" />
        <div>{{ item.text }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Footer",
  data() {
    return {
      falg: false,
      arr: [
        {
          text: "首页",
          imgUrl: require("../assets/imgs/首页1.png"),
          imgUrl1: require("../assets/imgs/首页.png"),
          falg: true,
        },
        {
          text: "分类",
          imgUrl: require("../assets/imgs/分类1.png"),
          imgUrl1: require("../assets/imgs/分类.png"),
          falg: false,
        },
        {
          imgUrl: require("../assets/imgs/断货王.png"),
          imgUrl1: require("../assets/imgs/断货王.png"),
          falg: false,
        },
        {
          text: "购物车",
          imgUrl: require("../assets/imgs/购物车1.png"),
          imgUrl1: require("../assets/imgs/购物车.png"),
          falg: false,
        },
        {
          text: "个人中心",
          imgUrl: require("../assets/imgs/个人中心1.png"),
          imgUrl1: require("../assets/imgs/个人中心.png"),
          falg: false,
        },
      ],
    };
  },
  methods: {
    change(i) {
      this.arr.forEach((item) => {
        item.falg = false;
      });
      this.arr[i].falg = true;
      if (i == 0) {
        this.$router.push({ name: "Page" });
      } else if (i == 1) {
        this.$router.push({ name: "Fl" });
      } else if (i == 2) {
        this.$router.push({ name: "Dhw" });
      } else if (i == 3) {
        this.$router.push({ name: "Gwc" });
      } else if (i == 4) {
        this.$router.push({ name: "UserLogin" });
      }
    },
  },
};
</script>
<style scoped>
.footer {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-evenly;
  font-size: 0.3rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #fff;
  border-top: 1px solid #ccc;
}
.cl {
  color: #e83d41;
}
.im {
  vertical-align: middle;
}
.size {
  width: 100%;
  text-align: center;
  margin-top: 0.05rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
</style>
